// Checkbox

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin checkbox {
  width: 100%;
  @include flex();
  > label {
    display: inline-block;
    white-space: nowrap;
    height: $--x-checkbox-height;
    line-height: $--x-checkbox-height;
    position: relative;
    color: $--x-text-300;
    font-weight: 600;
    @include text-align();
  }
  &-row {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    height: $--x-checkbox-height;
    line-height: $--x-checkbox-height;
  }
  &-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    outline: none;
    margin-right: 0.875rem;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: $--x-primary;
      .#{$--x-checkbox-prefix}-box {
        border-color: $--x-primary;
      }
    }
    &:last-child {
      margin-right: 0;
    }
    &.x-indeterminate {
      .#{$--x-checkbox-prefix}-box {
        border-color: $--x-primary;
        &::after {
          top: 50%;
          left: 50%;
          width: 0.5rem;
          height: 0.5rem;
          background-color: $--x-primary;
          border: 0;
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
          content: ' ';
        }
      }
    }
    &.x-checked {
      .#{$--x-checkbox-prefix}-box {
        border-color: $--x-primary;
        background-color: $--x-primary;
        &::after {
          border: 0.125rem solid $--x-background-100;
          border-top: 0;
          border-left: 0;
          top: 0.3875rem;
          left: 0.1875rem;
          width: 0.3125rem;
          height: 0.625rem;
          transform: rotate(40deg) scale(1) translate(-50%, -50%);
          opacity: 1;
          transition: all 0.2s;
          content: ' ';
        }
      }
    }
    &.x-disabled {
      @include disabled();
    }
  }
  &-box {
    border: $--x-border-width solid $--x-border;
    width: 1rem;
    height: 1rem;
    border-radius: 0.0625rem;
    background-color: $--x-background-a100;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    transition: all 0.3s;
    &:hover {
      border-color: $--x-primary;
    }
    &::after {
      position: absolute;
      top: 0.35rem;
      left: 0.175rem;
      display: inline-block;
      width: 0.3rem;
      height: 0.6rem;
      border: 0.125rem solid $--x-background-a100;
      border-top: 0;
      border-left: 0;
      transform: rotate(40deg) scale(0) translate(-50%, -50%);
      opacity: 0;
      transition: all 0.3s;
      content: ' ';
    }
  }
  &-label {
    margin-left: 0.325rem;
    user-select: none;
  }
  &.x-disabled {
    .#{$--x-checkbox-prefix}-item {
      &.x-indeterminate {
        .#{$--x-checkbox-prefix}-box::after {
          background-color: $--x-text-400;
        }
      }
      &.x-checked {
        .#{$--x-checkbox-prefix}-box::after {
          background-color: transparent;
        }
      }
      @include disabled();
    }
  }
  &.x-invalid,
  &.x-required {
    > label {
      color: $--x-danger;
    }
  }
  &.x-direction {
    &-row {
      > label {
        padding: 0 0.5rem 0 0;
      }
    }
    &-row-reverse {
      > label {
        padding: 0 0 0 0.5rem;
      }
    }
    &-column {
      align-items: inherit;
    }
    &-column-reverse {
      align-items: inherit;
    }
  }
}

@mixin disabled {
  color: $--x-text-400;
  cursor: not-allowed;
  .#{$--x-checkbox-prefix}-box {
    border-color: $--x-border-100;
    background-color: $--x-border-300;
    &::after {
      border-color: $--x-text-400;
      background-color: transparent;
    }
  }
}
